<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="找回支付密码"></bar>
        <div class="youba-primary-grey" style="height: 60px; text-align: center; line-height: 60px">{{title}}</div>
        <group>
            <mu-input label="校验码: " type="number" label-class="pass-verify" placeholder="短信校验码" v-model="verifyCode"
                      class="my-edit-name">
                <div :class="verify" class="forget-pass" @click="getVerify">{{label}}</div>
            </mu-input>
        </group>
        <div class="my-input">
            <x-button class="login-submit" @click.native="handleNext">下一步</x-button>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import {
        Bar,
        MInput
    } from 'muka-ui'
    import {
        Group,
        XButton
    } from 'vux'

    export default {
        name: 'editName',
        components: {
            Bar,
            'mu-input': MInput,
            Group,
            XButton
        },
        data: function () {
            return {
                title: '请获取验证码',
                verifyLabel: ['发送验证码', '后重新获取'],
                name: '',
                label: '',
                verify: {
                    'get-verify': true,
                    'disabled-verify': false
                },
                time: 60,
                handle: '',
                verifyCode: '',
            }
        },
        created: function () {
            this.label = this.verifyLabel[0]
            this.name = ''
            this.verifyCode = ''
            if (this.handle) {
                this.verify['get-verify'] = true
                this.verify['disabled-verify'] = false
                this.label = this.time + this.verifyLabel[0]
                this.time = 60
                this.label = this.verifyLabel[0]
                clearInterval(this.handle)
            }
        },
        computed: {
            mobile: function () {
                return this.$store.state.mobile
            },
            ...mapState([
                VUEX_NAME.verifySessionId,
            ]),
        },
        methods: {
            ...mapMutations([
                VUEX_NAME.updateVerifySessionId,
            ]),
            getVerify: async function () {
                if (this.verify['get-verify'] === true) {
                    this.$ajax(
                        'safe/findPayPwdPrepare',
                        {},
                        (content) => {
                            this.updateVerifySessionId(content.verifySessionId)
                            this.title = '验证码已经发送到手机 ' + content.mobile
                            this.label = this.time + this.verifyLabel[1]
                            this.verify['get-verify'] = false
                            this.verify['disabled-verify'] = true
                            this.handle = setInterval(() => {
                                this.time -= 1
                                if (this.time < 0) {
                                    this.verify['get-verify'] = true
                                    this.verify['disabled-verify'] = false
                                    this.time = 60
                                    this.label = this.verifyLabel[0]
                                    clearInterval(this.handle)
                                    return
                                }
                                this.label = this.time + this.verifyLabel[1]
                            }, 1000)
                        }, true)
                }
            },
            handleNext: async function () {
                if (!this.verifySessionId) {
                    this.$vux.toast.show({
                        text: '请先获得验证码',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                if (!this.verifyCode) {
                    this.$vux.toast.show({
                        text: '请输入验证码',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }

                this.$ajax(
                    'safe/findPayPwdTwo',
                    {
                        verifyCode: this.verifyCode,
                        verifySessionId: this.verifySessionId
                    },
                    (content) => {
                        this.$router.push('/passForget1')
                    }, true)
            }
        }
    }

</script>
<style lang="less">
    .myInfo-confirm {
        .weui-dialog__btn_default {
            display: none;
        }
    }

    .forget-pass {
        padding-left: 10px;
        position: relative;
        &:before {
            content: '';
            height: 70%;
            width: 1px;
            background: #d8d8d8;
            position: absolute;
            left: 0px;
            top: 15%;
        }
    }

    .disabled-verify {
        color: #b9b9b9;
    }

    .pass-verify {
        padding: 0 10px 0 0;
    }

</style>
